<template>
  <div class="pie-container">
    <div slot="header">
      <!-- =====【首页顶部导航】===== -->
      <div class="home-nav">
        <div class="home-nav-classify">
          <div class="home-nav-classify-content">
            <div class="home-nc-content-title">
              <div class="home-nc-content-name">
                {{ navClassifyNode.nameData }}
              </div>
              <span
                >{{ navClassifyNode.normal }} /
                {{ navClassifyNode.titleTotal }}</span
              >
            </div>
            <div class="home-nc-content-cutting-line"></div>
            <div class="home-nc-content">
              <p>总数：{{ navClassifyNode.titleTotal }}</p>
              <p>正常：{{ navClassifyNode.normal }}</p>
              <p>异常：{{ navClassifyNode.abnormal }}</p>
            </div>
          </div>
         <!-- <router-link :to="navClassifyNode.url">
            <div class="home-nav-classify-button">更多</div>
          </router-link>-->
        </div>

        <div class="home-nav-classify">
          <div class="home-nav-classify-content">
            <div class="home-nc-content-title">
              <div class="home-nc-content-name">
                {{ navClassifyService.nameData }}
              </div>
              <span
                >{{ navClassifyService.normal }} /
                {{ navClassifyService.titleTotal }}</span
              >
            </div>
            <div class="home-nc-content-cutting-line"></div>
            <div class="home-nc-content">
              <p>总数：{{ navClassifyService.titleTotal }}</p>
              <p>正常：{{ navClassifyService.normal }}</p>
              <p>异常：{{ navClassifyService.abnormal }}</p>
            </div>
          </div>
         <!-- <router-link :to="navClassifyService.url">
            <div class="home-nav-classify-button">更多</div>
          </router-link>-->
        </div>
        <!--<div class="home-nav-classify">
                  <div class="home-nav-classify-content">
                    <div class="home-nc-content-title">
                      <div class="home-nc-content-name">
                        {{ navClassifySystem.nameData }}
                      </div>
                      &lt;!&ndash; <span>{{navClassifySystem.normal}} / {{ navClassifySystem.titleTotal }}</span> &ndash;&gt;
                    </div>
                    <div class="home-nc-content-cutting-line"></div>
                    <div class="home-nc-content">
                      <p>总数：{{ navClassifySystem.titleTotal }}</p>
                    </div>
                  </div>
                  <router-link :to="navClassifySystem.url">
                    <div class="home-nav-classify-button">更多</div>
                  </router-link>
                </div>-->
      </div>
      <!-- 集群图内容 -->
      <div class="home-chart">
        <div class="pie-tb-header">
          <div class="playVideoHeader">
            <div class="resourcesMonitor">
              <div class="first-content">
                <!-- <p class="font-style">集群内存使用情况</p> -->
                <div class="card-header-actions">
                  <div class="content">
                    <div class="content-item">
                      <div class="echarts border">
                        <div id="main1" class="echarts-style"></div>
                        <div class="right-content">
                          <p style="color: #f77a5b" class="font-style">
                            集群内存使用率
                          </p>
                          <!-- <p>同比上周5%</p> -->
                        </div>
                      </div>
                      <div class="text-item">
                        <div class="text-item-item">
                          <img
                            src="../../../../assets/resource.png/res01.png"
                            class="nodeIcon"
                            alt=""
                          />
                          <div class="text-right-content">
                            
                            <p class="title">已使用</p>
                           
                            <!-- <p class="title">Used</p> -->
                            <p class="content-text">
                              {{  memoryInfo.usedSize?memoryInfo.usedSize.toFixed(2):""}} GiB
                            </p>
                          </div>
                        </div>
                        <div class="text-item-item">
                          <img
                            src="../../../../assets/resource.png/res02.png"
                            class="nodeIcon"
                            alt=""
                          />
                          <div class="text-right-content">
                            <p class="title">总量</p>
                            <!-- <p class="title">Total</p> -->
                            <p class="content-text">
                              {{ memoryInfo.totalSize }} GiB
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="content-item content-item-margin">
                      <div class="echarts border">
                        <div id="main2" class="echarts-style"></div>
                        <div class="right-content">
                          <p style="color: #4c90f8" class="font-style">
                            集群CPU使用率
                          </p>
                          <!-- <p>同比上周5%</p> -->
                        </div>
                      </div>
                      <div class="text-item">
                        <div class="text-item-item cpu-box">
                          <img
                            src="../../../../assets/resource.png/res04.png"
                            class="nodeIcon"
                            alt=""
                          />
                          <div class="text-right-content">
                            <p class="title">总量</p>
                            <p class="content-text">
                              {{ cpuInfo.totalCores }} Cores
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="content-item">
                      <div class="echarts border">
                        <div id="main3" class="echarts-style"></div>
                        <div class="right-content">
                          <p style="color: #aa53ef" class="font-style">
                            共享存储空间使用率
                          </p>
                          <!-- <p>同比上周5%</p> -->
                        </div>
                      </div>
                      <div class="text-item">
                        <div class="text-item-item">
                          <img
                            src="../../../../assets/resource.png/res05.png"
                            class="nodeIcon"
                            alt=""
                          />
                          <div class="text-right-content">
                            <p class="title">已使用</p>
                            <p class="content-text">
                              {{ shareDiskInfo.shareUsedSize ?shareDiskInfo.shareUsedSize.toFixed(2):""}} TiB
                            </p>
                          </div>
                        </div>
                        <div class="text-item-item">
                          <img
                            src="../../../../assets/resource.png/res06.png"
                            class="nodeIcon"
                            alt=""
                          />
                          <div class="text-right-content">
                            <p class="title">总量</p>
                            <p class="content-text">
                              {{ shareDiskInfo.shareTotalSize}} TiB
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div slot="iscontent">
      <!-- 系统集群负载情况 -->
      <div class="home-histogram-main">
        <div class="home-histogram-top">
          <div class="middle-content">
            <div
              class="title"
              style="display: flex; justify-content: space-between"
            >
              <div class="font-style">集群系统负载情况</div>
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <div class="timeRange">
                  <p
                    v-for="(item, index) in timeRangeList"
                    :key="index"
                    :class="[
                      item.value == sysCurrent && dataVal[0] == '' ? 'cur' : '',
                    ]"
                    @click="intervalSelect(item)"
                  >
                    {{ item.label }}
                  </p>
                </div>
                <div class="selectTime">
                  <div class="date-picker">
                    <DatePicker
                      confirm
                      type="datetimerange"
                      format="yyyy-MM-dd HH:mm"
                      v-model="dataVal"
                      :split-panels="true"
                      placeholder="自定义查询"
                      style="width: 150px"
                      @on-change="changeChartsLoadingCondition"
                      @on-ok="changeChartsLoadingConditionOk"
                    ></DatePicker>
                  </div>
                </div>
              </div>
            </div>
            <div style="height: 400px" id="main6"></div>
          </div>
        </div>
      </div>

      <div class="home-histogram-main">
        <!-- 左侧CPU平均使用率 -->
        <div class="home-histogram">
          <div
            class="title"
            style="display: flex; justify-content: space-between"
          >
            <p class="font-style">集群CPU平均使用率</p>
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <div class="timeRange">
                <p
                  v-for="(item, index) in timeRangeList"
                  :key="index"
                  :class="[
                    item.value == cpuCurrent && leftVal[0] == '' ? 'cur' : '',
                  ]"
                  @click="changeRange(item)"
                >
                  {{ item.label }}
                </p>
              </div>
              <div class="selectTime">
                <div class="date-picker">
                  <DatePicker
                    confirm
                    type="datetimerange"
                    format="yyyy-MM-dd HH:mm"
                    :split-panels="true"
                    placeholder="自定义查询"
                    style="width: 150px"
                    @on-change="changeBottomCharts"
                    @on-ok="changeBottomChartsOk"
                  ></DatePicker>
                </div>
              </div>
            </div>
          </div>
          <div id="main4" class="home-histogram-content"></div>
        </div>
        <!-- 右侧CPU平均使用率 -->
        <div class="home-histogram" style="margin-left: 10px">
          <div
            class="title"
            style="display: flex; justify-content: space-between"
          >
            <p class="font-style">集群内存平均使用率</p>
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <div class="timeRange">
                <p
                  v-for="(item, index) in timeRangeList"
                  :key="index"
                  :class="[
                    item.value == memCurrent && rightVal[0] == '' ? 'cur' : '',
                  ]"
                  @click="changeRanges(item)"
                >
                  {{ item.label }}
                </p>
              </div>
              <div class="selectTime rightTime">
                <div class="date-picker">
                  <DatePicker
                    confirm
                    type="datetimerange"
                    format="yyyy-MM-dd HH:mm"
                    :split-panels="true"
                    placeholder="自定义查询"
                    style="width: 150px"
                    @on-change="changeBottomCharts2"
                    @on-ok="changeBottomCharts2Ok"
                  ></DatePicker>
                </div>
                <!-- <Input
                                  placeholder="间隔"
                                  v-model="intervalContentRight"
                                  @on-change="changeIntervalBottom"
                                  class="date-time-interval"
                                />
                                <Select
                                  v-model="intervalTimeRight"
                                  :label-in-value="true"
                                  @on-change="intervalSelectRight"
                                  style="width:50px"
                                >
                                  <Option
                                    v-for="item in cityList"
                                    :value="item.value"
                                    :key="item.value"
                                    >{{ item.label }}</Option
                                  >
                                </Select> -->
              </div>
            </div>
          </div>
          <div id="main5" class="home-histogram-content"></div>
        </div>
      </div>

      <div class="home-histogram-main">
        <!-- 左侧CPU平均使用率 -->
        <div class="home-histogram">
          <div
                  class="title"
                  style="display: flex; justify-content: space-between"
          >
            <p class="font-style">数据上传速度</p>
            <div
                    style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <div class="timeRange">
                <p
                        v-for="(item, index) in timeRangeList"
                        :key="index"
                        :class="[
                    item.value == cpuCurrent && leftVal[0] == '' ? 'cur' : '',
                  ]"
                        @click="changeRangeUp(item)"
                >
                  {{ item.label }}
                </p>
              </div>
              <div class="selectTime">
                <div class="date-picker">
                  <DatePicker
                          confirm
                          type="datetimerange"
                          format="yyyy-MM-dd HH:mm"

                          :split-panels="true"
                          placeholder="自定义查询"
                          style="width: 150px"
                          @on-change="changeBottomCharts"
                          @on-ok="changeBottomChartsOk('B')"
                  ></DatePicker>
                </div>
              </div>
            </div>
          </div>
          <div id="main8" class="home-histogram-content"></div>
        </div>
        <!-- 右侧CPU平均使用率 -->
        <div class="home-histogram" style="margin-left: 10px">
          <div
                  class="title"
                  style="display: flex; justify-content: space-between"
          >
            <p class="font-style">数据下载速度</p>
            <div
                    style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <div class="timeRange">
                <p
                        v-for="(item, index) in timeRangeList"
                        :key="index"
                        :class="[
                    item.value == memCurrent && rightVal[0] == '' ? 'cur' : '',
                  ]"
                        @click="changeRangesDown(item)"
                >
                  {{ item.label }}
                </p>
              </div>
              <div class="selectTime rightTime">
                <div class="date-picker">
                  <DatePicker
                          confirm
                          type="datetimerange"
                          format="yyyy-MM-dd HH:mm"
                          :split-panels="true"
                          placeholder="自定义查询"
                          style="width: 150px"
                          @on-change="changeBottomCharts2"
                          @on-ok="changeBottomCharts2Ok('B')"
                  ></DatePicker>
                </div>
                <!-- <Input
                                  placeholder="间隔"
                                  v-model="intervalContentRight"
                                  @on-change="changeIntervalBottom"
                                  class="date-time-interval"
                                />
                                <Select
                                  v-model="intervalTimeRight"
                                  :label-in-value="true"
                                  @on-change="intervalSelectRight"
                                  style="width:50px"
                                >
                                  <Option
                                    v-for="item in cityList"
                                    :value="item.value"
                                    :key="item.value"
                                    >{{ item.label }}</Option
                                  >
                                </Select> -->
              </div>
            </div>
          </div>
          <div id="main7" class="home-histogram-content"></div>
        </div>
      </div>
    </div>
    <div slot="footer">
      <div>
        <div class="pie-tb-footer">
          <div class="last-content">
            <div class="font-style">
              <p>服务关联关系</p>
            </div>
            <my-graoh></my-graoh>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import myGraoh from "./index";
export default {
  name: "monitorMainPage",
  components: { myGraoh },
  data() {
    return {
      cityList: [
        {
          value: "s",
          label: "秒",
        },
        {
          value: "m",
          label: "分",
        },
        {
          value: "h",
          label: "时",
        },
        {
          value: "d",
          label: "天",
        },
        {
          value: "w",
          label: "周",
        },
        {
          value: "y",
          label: "年",
        },
      ],
      cpuCurrent: "0.5", //当前时间间隔
      memCurrent: "0.5", //当前时间间隔
      sysCurrent: "0.5", //当前时间间隔
      loadRange: {}, //集群负载信息
      memoryInfo: {}, //集群内存信息
      cpuInfo: {}, //集群内存信息
      diskInfo: {}, //集群磁盘信息
      dataValstate: "", //底部CPU集群曲线图开始时间==cpu左侧
      dataValend: "", //底部CPU集群曲线图结束时间==cpu左侧
      dataValstate2: "", //底部内存曲线图开始时间==内存右侧
      dataValend2: "", //底部内存曲线图结束时间==内存右侧
      dataValstate3: "", //中间负载情况曲线图开始时间==负载情况图
      dataValend3: "", //中间负载情况曲线图结束时间==负载情况图
      dataVal: [], //底部曲线图时间线接收
      leftVal: [], //底部左侧时间范围
      rightVal: [], //底部右侧时间范围
      dataVal2: [], //底部曲线图时间线接收
      nodeData: {
        run: 4, // 运行数/总数
        state: 3, // 图表状态数:
        normal: 4, // 正常:
        error: 0, // 异常:
        mistake: 0, // 错误:
      },
      step: "", //步长
      navClassifyNode: {
        // 首页导航分类==节点
        titleTotal: "",
        normal: "", // 正常
        abnormal: "", // 异常
        nameData: "节点监控",
        url: "/monitor/statusMonitor/nodesMonitor",
      },
      navClassifySystem: {
        // 首页导航分类==系统
        titleTotal: "",
        normal: "",
        nameData: "系统监控",
        url: "/monitor/serverManage/resourceManagement",
      },
      navClassifyService: {
        // 首页导航分类==服务
        titleTotal: "",
        normal: "", // 正常
        abnormal: "", // 异常
        nameData: "服务监控",
        url: "/monitor/serverManage/resourceManagement",
      },
      // ====【底部柱状图】====
      option4: {
        //底部柱状图==集群CPU平均使用率
        title: {},
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: "{b}</br>使用率{c}%",
          // extraCssText: 'width:50px;height:50px;font-size:14px;'
        },
        grid: {
          left: "3%",
          right: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [],
          axisLabel: {
            //修改x坐标系字体颜色
            show: true,
            textStyle: {
              color: "#c9e1ff",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            //修改y坐标系字体颜色
            show: true,
            textStyle: {
              color: "#c9e1ff",
            },
            formatter: "",
          },
        },
        series: [
          {
            data: [],
            type: "line",
            smooth: true,
            areaStyle: {},
          },
        ],
      },
      option5: {
        //底部柱状图==集群内存平均使用率
        title: {},
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: "{b}</br>使用率{c}%",
          // extraCssText: 'width:50px;height:50px;font-size:14px;'
        },
        grid: {
          left: "3%",
          right: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [],
          axisLabel: {
            //修改x坐标系字体颜色
            show: true,
            textStyle: {
              color: "#c9e1ff",
            },
          },
        },
        yAxis: {
          type: "value",
          // min: 0,
          // max: 100,
          // splitNumber: 5,
          axisLabel: {
            //修改y坐标系字体颜色
            show: true,
            textStyle: {
              color: "#c9e1ff",
            },
            formatter: "",
          },
        },
        series: [
          {
            data: [],
            type: "line",
            smooth: true,
            areaStyle: {},
          },
        ],
      },
      option6: {
        //底部柱状图==集群系统负载情况
        color: ["#2583da", "#7c62eb", "#59d5d7"],
        tooltip: {
          trigger: "axis",

          axisPointer: {
            // type: "cross",
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["1分钟负载情况", "5分钟负载情况", "15分钟负载情况"],
          textStyle: {
            color: "#98dcff",
          },
        },
        toolbox: {
          feature: {
            saveAsImage: {
              title: "保存",
            },
          },
          iconStyle: {
            color: "#fdfcfc",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [],
            axisLabel: {
              formatter: "{value} ",
              color: "#98dcff",
            },
            // splitLine: {
            //   //网格线
            //   lineStyle: {
            //     type: "solid", //设置网格线类型 dotted：虚线   solid:实线
            //   },
            //   show: true, //隐藏或显示
            // },
          },
        ],
        yAxis: [
          {
            type: "value",
            boundaryGap: false,
            axisLabel: {
              formatter: "{value} ",
              color: "#98dcff",
            },
            // data: ["0", "20", "40", "60", "80", "100"],
            data: [],
            // splitLine: {
            //   //网格线
            //   lineStyle: {
            //     type: "dotted", //设置网格线类型 dotted：虚线   solid:实线
            //   },
            //   show: true, //隐藏或显示
            // },
          },
        ],
        series: [
          {
            name: "1分钟负载情况",
            type: "line",
            smooth: true,
            symbol: "none",
            areaStyle: {
              opacity: 0.3,
              color: "#2583da",
            },
            emphasis: {
              focus: "series",
            },
            itemStyle: {
              color: "#2583da",
              normal: {
                lineStyle: {
                  // color: "rgba(255,215,0,0.2)" //折线的颜色
                  width: 1,
                  color: "#2583da",
                },
              },
            },
            // data: [20, 40, 30, 32, 60, 50, 25, 25, 25, 50, 75, 30, 0],
            data: [],
          },
          {
            name: "5分钟负载情况",
            type: "line",
            smooth: true,
            symbol: "none",

            areaStyle: {
              opacity: 0.3,
              color: "#7c62eb",
            },
            // emphasis: {
            //   focus: "series",
            // },
            itemStyle: {
              color: "#7c62eb",
              normal: {
                lineStyle: {
                  // color: "rgba(255,215,0,0.2)" //折线的颜色
                  color: "#7c62eb",
                  width: 1,
                },
              },
            },
            // data: [50, 40, 0, 10, 40, 50, 5, 20, 75, 60, 20, 40, 0, 25],
            data: [],
          },
          {
            name: "15分钟负载情况",
            type: "line",
            symbol: "none",
            smooth: true,
            areaStyle: {
              opacity: 0.3,
              color: "#59d5d7",
            },
            // emphasis: {
            //   focus: "series",
            // },
            itemStyle: {
              color: "#59d5d7",
              normal: {
                lineStyle: {
                  // color: "rgba(255,215,0,0.2)" //折线的颜色
                  width: 1,
                  color: "#59d5d7",
                },
              },
            },
            // data: [ 40, 0, 10, 40, 50, 5, 20, 75, 60, 20, 40, 0, 25,50],
            data: [],
          },
        ],
      },
      option1: {
        //集群使用率==内存使用率仪表盘
        color: "#F77A5B",
        series: [
          {
            radius: "70%", //仪表盘半径
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false,
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                // borderWidth: 1,
                // borderColor: '#464646'
              },
            },
            axisLine: {
              lineStyle: {
                width: 15,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: [
              {
                value: 30,
                detail: {
                  offsetCenter: ["0%", "0%"],
                },
              },
            ],
            detail: {
              width: 80,
              height: 20,
              fontSize: 20,
              fontWeight: 600,
              color: "#F77A5B",
              formatter: "{value}%",
            },
          },
        ],
      },
      option2: {
        //集群使用率==CPU使用率仪表盘
        color: "#4C90F8",
        series: [
          {
            radius: "70%", //仪表盘半径
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false,
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                // borderWidth: 1,
                // borderColor: '#464646'
              },
            },
            axisLine: {
              lineStyle: {
                width: 15,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: [
              {
                value: 55,
                detail: {
                  offsetCenter: ["0%", "0%"],
                },
              },
            ],
            detail: {
              width: 80,
              height: 20,
              fontSize: 20,
              fontWeight: 600,
              color: "#4C90F8",
              formatter: "{value}%",
            },
          },
        ],
      },
      option3: {
        //集群使用率==磁盘空间使用率仪表盘
        color: "#AA53EF",
        series: [
          {
            radius: "70%", //仪表盘半径
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false,
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                // borderWidth: 1,
                // borderColor: '#464646'
              },
            },
            axisLine: {
              lineStyle: {
                width: 15,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: [
              {
                value: 30,
                detail: {
                  offsetCenter: ["0%", "0%"],
                },
              },
            ],
            detail: {
              width: 80,
              height: 20,
              fontSize: 20,
              fontWeight: 600,
              color: "#AA53EF",
              formatter: "{value}%",
            },
          },
        ],
      },
      yesterday: "",
      today: "",
      shareDiskInfo:{},
      timeRangesLeft: "", //左侧时间段
      timeRangesRight: "", //右侧时间段
      intervalContentLeft: "5",
      intervalContentRight: "5",
      intervalTimeLeft: "m",
      intervalTimeRight: "m",
      timeRangeList: [
        {
          value: "0.5",
          label: "30分钟",
        },
        {
          value: "1",
          label: "1小时",
        },
        {
          value: "2",
          label: "2小时",
        },
        {
          value: "24",
          label: "一天",
        },
        {
          value: "168",
          label: "1周",
        },
      ],
      startTime: "",
      endTime: "",

    };
  },
  created() {

    this.yesterday = new Date().getTime() - 24 * 60 * 60 * 1000;
    this.today = new Date().getTime();
    this.getMemoryCpuDiskInfo({});
    this.getMonitorNum();
    this.step = this.timeRangeList[0].value * 18 + "s";

    this.changeRanges({ value: "0.5" });
    this.changeRange({ value: "0.5" });
    this.changeRangeUp({ value: "0.5" });
    this.changeRangesDown({ value: "0.5" });
    this.intervalSelect({ value: "0.5" });


  },
  mounted() {
    if (this.timer) {
      clearInterval(this.timer);
    } else {
      this.timer = setInterval(() => {
        this.getMemoryCpuDiskInfo({});
        this.getMonitorNum();
        this.step = this.timeRangeList[0].value * 18 + "s";
        this.changeRanges({ value: "0.5" });
        this.changeRange({ value: "0.5" });
        this.changeRangeUp({ value: "0.5" });
        this.changeRangesDown({ value: "0.5" });
        this.intervalSelect({ value: "0.5" });

      }, 30000);
    }
  },
  updated() {
    this.chartsTopShow();
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {


    //获取节点、系统、服务监控数量
    getMonitorNum() {
      let self = this;
      let param = {
        businessId: "",
      };
      self.http.get(this.$api.monitorApi.getServiceList, param).then((res) => {
        if (res.data.code == 0) {
            console.log(res,'rererererererere')
          self.navClassifyService.titleTotal = res.data.data.service.total;
          self.navClassifyService.normal = res.data.data.service.normal;
          self.navClassifyService.abnormal = res.data.data.service.abnormal;

          self.navClassifyNode.titleTotal = res.data.data.node.total;
          self.navClassifyNode.normal = res.data.data.node.normal;
          self.navClassifyNode.abnormal = res.data.data.node.abnormal;
        } else {
          self.$Message.info(res.data.message);
        }
      });
    },
    //改变时间间隔
    /*changeIntervalBottomLeft () {
                this.showChartsBottomCurveData();
            },
            changeIntervalBottom () {
                this.showChartsBottomRamData();
            },
            changeIntervalNodeLoad () {
                this.getRangeNodeLoad(1, 0);
                this.getRangeNodeLoad(5, 1);
                this.getRangeNodeLoad(15, 2);
            },*/
    //获取负载时间间隔单位
    intervalSelect(item) {
      // /3600000
      this.sysCurrent = item.value;
      this.dataValend3 = new Date().getTime();
      let intTime = item.value * 3600000;
      this.dataValstate3 = this.dataValend3 - intTime;
      this.step = item.value * 18 + "s";
      this.getRangeNodeLoad(1, 0);
      this.getRangeNodeLoad(5, 1);
      this.getRangeNodeLoad(15, 2);
    },
    /* intervalSelectLeft (data) {
                this.intervalTimeLeft = data.value;
                this.showChartsBottomCurveData();
            },
            intervalSelectRight (data) {
                this.intervalTimeRight = data.value;
                this.showChartsBottomRamData();
            },*/
    // 获取负载区间信息==接口
    getRangeNodeLoad(LoadInterval, index) {
      let _self = this;
      let params = {
        // nodeName:,  //节点名称
        loadNum: LoadInterval, //负载名称(1,5,15)
        startTime: _self.dataValstate3 ? _self.dataValstate3 : this.yesterday,
        endTime: _self.dataValend3 ? _self.dataValend3 : this.today,
        step: this.step, //时间间隔s,m,h,d,w,y
      };
      _self.http
        .get(this.$api.monitorApi.getRangeNodeLoad, params)
        .then((res) => {
          if (res.data.code == 0) {
            let xAxisData = []; //x轴数据:时间轴
            let seriesData = []; //y轴数据:使用率
            if (!!res.data.data.result) {
              res.data.data.result.map((item) => {
                xAxisData.push(this.formatDate(new Date(item[0]), 10));
                seriesData.push(item[1]);
              });
            }
            // 系统集群负载情况==图表
            _self.option6.series[index].data = seriesData;
            _self.option6.xAxis[0].data = xAxisData;
            let myChartHistogram6 = _self.$echarts.init(
              document.getElementById("main6")
            );
            myChartHistogram6.setOption(_self.option6);
          } else {
          }
        });
    },
    // 获取集群磁盘信息
    getMemoryCpuDiskInfo() {
      let that = this;
      this.http.get(this.$api.monitorApi.getClusterInfo, {}).then((res) => {
        if (res.data.code == 0) {
            that.shareDiskInfo = res.data.data.shareDiskInfo
          that.diskInfo = res.data.data.diskInfo;
          that.memoryInfo = res.data.data.memoryInfo;
          that.cpuInfo = res.data.data.cpuInfo;
        }
      });
    },
    // 中间集群图
    chartsTopShow() {
      this.option1.series[0].data[0].value = this.memoryInfo.memoryRate;
      let myChart = this.$echarts.init(document.getElementById("main1"));
      myChart.setOption(this.option1);

      this.option2.series[0].data[0].value = this.cpuInfo.avgRate;
      let myChart1 = this.$echarts.init(document.getElementById("main2"));
      myChart1.setOption(this.option2);

      this.option3.series[0].data[0].value = this.shareDiskInfo.shareRate;
      this.option3.series[0].detail.formatter = "{value}%";
      let myChart3 = this.$echarts.init(document.getElementById("main3"));
      myChart3.setOption(this.option3);
    },


    //底部charts曲线图和接口==左侧CPU 时间段
    changeRange(item) {
      // /3600000
      this.cpuCurrent = item.value;
      this.endTime = new Date().getTime();
      let intTime = item.value * 3600000;
      this.startTime = this.endTime - intTime;
      this.step = item.value * 18 + "s";

      // this.timeRangesLeft = item.value;
      // this.startTime = this.$utils.timeStream(value)[0];
      // this.endTime = this.$utils.timeStream(value)[1];
      this.showChartsBottomCurveData();
    },
    // 底部charts曲线图和接口==右侧CPU 时间段
    changeRanges(item) {
      // /3600000
      this.memCurrent = item.value;
      this.endTime = new Date().getTime();
      let intTime = item.value * 3600000;
      this.startTime = this.endTime - intTime;
      this.step = item.value * 18 + "s";
      // this.timeRangesRight = item.value;
      // this.startTime = this.$utils.timeStream(value)[0];
      // this.endTime = this.$utils.timeStream(value)[1];
      this.showChartsBottomRamData();
    },


    // 底部charts曲线图和接口==左侧CPU
    showChartsBottomCurveData() {
      let _self = this;
      let params = {
        nodeName: "",
        startTime: _self.startTime ? _self.startTime : this.yesterday,
        endTime: _self.endTime ? _self.endTime : this.today,
        step: _self.step,
      };
      this.http.get(this.$api.monitorApi.getRangeCpu, params).then((res) => {
        if (res.data.code === 0) {
          let xAxisData = []; //x轴数据:时间轴
          let seriesData = []; //y轴数据:CPU平均使用率
          if (!!res.data.data.result) {
            res.data.data.result.map((item) => {
              xAxisData.push(this.formatDate(new Date(item[0]), 10));
              seriesData.push(item[1]);
            });
          }
          let myChartHistogram = _self.$echarts.init(
            document.getElementById("main4")
          );
          myChartHistogram.setOption(_self.option4);
          myChartHistogram.setOption({
            xAxis: {
              data: xAxisData,
            },
            yAxis: {
              axisLabel: {
                formatter: `{value}${res.data.data.unit}`,
              },
            },
            series: {
              data: seriesData,
            },
          });
          // let a = _self.option4.xAxis.data.find(xAxisData);
        } else {
          if (this.intervalContentLeft !== "") {
            this.$Message.error(res.message);
          }
        }
      });
    },

    // 底部charts曲线图和接口==右侧内存
    showChartsBottomRamData() {
      let _self = this;
      let params = {
        nodeName: "",
        startTime: _self.startTime ? _self.startTime : this.yesterday,
        endTime: _self.endTime ? _self.endTime : this.today,
        step: _self.step,
      };
      this.http
        .get(this.$api.monitorApi.getRangeMemoryUsage, params)
        .then((res) => {
          if (res.data.code === 0) {
            let xAxisData = []; //x轴数据:时间轴
            let seriesData = []; //y轴数据:CPU平均使用率
            if (!!res.data.data.result) {
              res.data.data.result.map((item) => {
                xAxisData.push(this.formatDate(new Date(item[0]), 10));
                seriesData.push(item[1]);
              });
            }
            let myChartHistogram5 = _self.$echarts.init(
              document.getElementById("main5")
            );
            _self.option5.xAxis.data = xAxisData;
            _self.option5.yAxis.axisLabel.formatter = `{value}${res.data.data.unit}`;
            _self.option5.series[0].data = seriesData;

            myChartHistogram5.setOption(_self.option5);
          } else {
            if (this.intervalContentRight !== "") {
              this.$Message.error(res.message);
            }
          }
        });
    },



    changeRangeUp(item) {
      // /3600000
      this.cpuCurrent = item.value;
      this.endTime = new Date().getTime();
      let intTime = item.value * 3600000;
      this.startTime = this.endTime - intTime;
      this.step = item.value * 18 + "s";

      // this.timeRangesLeft = item.value;
      // this.startTime = this.$utils.timeStream(value)[0];
      // this.endTime = this.$utils.timeStream(value)[1];
      this.showChartsBottomCurveDataUp();
    },
    // 底部charts曲线图和接口==右侧CPU 时间段
    changeRangesDown(item) {
      // /3600000
      this.memCurrent = item.value;
      this.endTime = new Date().getTime();
      let intTime = item.value * 3600000;
      this.startTime = this.endTime - intTime;
      this.step = item.value * 18 + "s";
      // this.timeRangesRight = item.value;
      // this.startTime = this.$utils.timeStream(value)[0];
      // this.endTime = this.$utils.timeStream(value)[1];
      this.showChartsBottomRamDataDown();
    },
    // 底部charts曲线图和接口==左侧CPU




    showChartsBottomCurveDataUp() {
      let _self = this;
      let params = {
        nodeName: "",
        startTime: _self.startTime ? _self.startTime : this.yesterday,
        endTime: _self.endTime ? _self.endTime : this.today,
        step: _self.step,
      };
      this.http.get(this.$api.monitorApi.getRangeNetworkReceive, params).then((res) => {

        if (res.data.code === 0) {
          let xAxisData = []; //x轴数据:时间轴
          let seriesData = []; //y轴数据:CPU平均使用率
          if (res.data.success) {
            res.data.data.map((item) => {
              xAxisData.push(this.formatDate(new Date(item[0]), 10));
              seriesData.push((item[1]/1000).toFixed(2));
            });
          }
          let myChartHistogram = _self.$echarts.init(
                  document.getElementById("main8")
          );
          myChartHistogram.setOption(_self.option4);
          myChartHistogram.setOption({
            xAxis: {
              data: xAxisData,
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
              },
              formatter: "{b}</br>速度：{c}",
              // extraCssText: 'width:50px;height:50px;font-size:14px;'
            },
            yAxis: {
              axisLabel: {
                formatter: `{value}${"Mbps"}`,
              },
            },
            series: {
              data: seriesData,
            },
          });
          // let a = _self.option4.xAxis.data.find(xAxisData);
        } else {
          if (this.intervalContentLeft !== "") {
            this.$Message.error(res.message);
          }
        }
      });
    },
    // 底部charts曲线图和接口==右侧内存
    showChartsBottomRamDataDown() {
      let _self = this;
      let params = {
        nodeName: "",
        startTime: _self.startTime ? _self.startTime : this.yesterday,
        endTime: _self.endTime ? _self.endTime : this.today,
        step: _self.step,
      };
      this.http
              .get(this.$api.monitorApi.getRangeNetworkTransmit, params)
              .then((res) => {
                if (res.data.code === 0) {
                  let xAxisData = []; //x轴数据:时间轴
                  let seriesData = []; //y轴数据:CPU平均使用率
                  if (res.data.success) {
                    res.data.data.map((item) => {
                      xAxisData.push(this.formatDate(new Date(item[0]), 10));
                      seriesData.push((item[1]/1000).toFixed(2));
                    });
                  }
                  let myChartHistogram5 = _self.$echarts.init(
                          document.getElementById("main7")
                  );

                  let list=JSON.parse(JSON.stringify(_self.option5))
                  list.tooltip.formatter="{b}</br>速度：{c}"
                  list.xAxis.data = xAxisData;
                  list.yAxis.axisLabel.formatter = `{value}${"Mbps"}`;
                  list.series[0].data = seriesData;
                  myChartHistogram5.setOption(list);
                } else {
                  if (this.intervalContentRight !== "") {
                    this.$Message.error(res.message);
                  }
                }
              });
    },


    // 左侧CPU平均使用率
    changeBottomCharts(leftVal) {
      if (!!leftVal[0]) {
        this.leftVal = leftVal;
        this.dataValstate =
          Math.round(new Date(this.leftVal[0]) / 1000) + "000";
        this.dataValend = Math.round(new Date(this.leftVal[1]) / 1000) + "000";
        // this.showChartsBottomCurveData();
      } else {
        this.dataValstate = Math.round(new Date("2021-05-14") / 1000) + "000";
        this.dataValend = Math.round(new Date("2021-06-15") / 1000) + "000";
        // this.showChartsBottomCurveData();
      }
      this.startTime = new Date(this.leftVal[0]).getTime();
      this.endTime = new Date(this.leftVal[1]).getTime();
      this.step = (this.endTime - this.startTime) / 200000 + "s";
    },
    // 日期选择确定
    changeBottomChartsOk(data) {
      if (data==="B") {
        this.showChartsBottomCurveDataUp();
      }else{
        this.showChartsBottomCurveData();
      }
    },
    // 右侧CPU平均使用率
    changeBottomCharts2(rightVal) {
      if (!!rightVal[0]) {
        this.rightVal = rightVal;
        this.dataValstate2 =
          Math.round(new Date(this.rightVal[0]) / 1000) + "000";
        this.dataValend2 =
          Math.round(new Date(this.rightVal[1]) / 1000) + "000";
        // this.showChartsBottomRamData();
      } else {
        this.dataValstate2 = Math.round(new Date("2021-05-14") / 1000) + "000";
        this.dataValend2 = Math.round(new Date("2021-06-15") / 1000) + "000";
        // this.showChartsBottomRamData();
      }
      this.startTime = new Date(this.rightVal[0]).getTime();
      this.endTime = new Date(this.rightVal[1]).getTime();
      this.step = (this.endTime - this.startTime) / 200000 + "s";
    },
    // 日期选择确定
    changeBottomCharts2Ok(data) {
      if (data === "B") {
        this.showChartsBottomRamDataDown();
      } else {
        this.showChartsBottomRamData();

      }
    },
    // 系统集群负载情况
    changeChartsLoadingCondition(dataVal) {
      if (dataVal[0]) {
        this.dataVal = dataVal;
        this.dataValstate3 =
          Math.round(new Date(this.dataVal[0]) / 1000) + "000";
        this.dataValend3 = Math.round(new Date(this.dataVal[1]) / 1000) + "000";
        this.getRangeNodeLoad();
      } else {
        this.getRangeNodeLoad();
      }
      this.dataValstate3 = new Date(this.dataVal[0]).getTime();
      this.dataValend3 = new Date(this.dataVal[1]).getTime();
      // let intTime=;
      this.step = (this.dataValend3 - this.dataValstate3) / 200000 + "s";
    },
    // 日期选择确定
    changeChartsLoadingConditionOk() {
      this.getRangeNodeLoad(1, 0);
      this.getRangeNodeLoad(5, 1);
      this.getRangeNodeLoad(15, 2);
    },
  },
};
</script>

<style lang="less" scoped>
  /deep/.ivu-date-picker{
    width: 287px!important;
  }
/* 首页根标签样式 */
.pie-container {
  /* display: block; */
  height: calc(100vh - 80px);
  overflow: auto;
}
.pie-container::-webkit-scrollbar {
  width: 0 !important;
}

/* 首页导航样式 */
.home-nav {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /* background-color: #4c87dfb9; */
  .home-nav-classify:nth-child(2) {
    margin: 0px 10px 0px 10px;
  }
  .home-nav-classify {
    flex: 1;
    // display: flex;
    box-shadow: inset 0px 0px 3px 1px var(--label-font-color, #5d8bc4);
    width: 34%;
    height: 180px;
    // background-color: #4c87dfb9;
    // border-radius: 5px;
    transition: 0.4s;
    margin-bottom: 12px;
    overflow: hidden;
    position: relative;
    background-color: white;
    .home-nav-classify-content {
      display: flex;
      padding: 10px;
      height: 170px;
      align-items: center;
      .home-nc-content-title {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        font-weight: 700;

        // margin-right: 30px;
      }
      .home-nc-content-cutting-line {
        height: 100px;
        width: 2;
        border: 1px solid #98909070;
        // border: 1px solid #fff;
        // margin-left: 120px;
      }
      .home-nc-content {
        margin-left: 60px;
        display: flex;
        flex: 0.5;
        flex-direction: column;
        p {
          /* width: 80px; */
          font-size: 20px;
          // color: @main-font-color;
          font-weight: 700;

          margin: 3px;
        }
      }
      .home-nc-content-name {
        font-size: 22px;
      }
      span {
        font-size: 38px;
      }
    }
    .home-nav-classify-button {
      width: 100%;
      height: 30px;
      font-size: 16px;
      font-weight: 600;
      color: aliceblue;
      background: var(--label-font-color, #5d8bc4);
      // background-color: rgba(78, 78, 78, 0.596);
      text-align: center;
      vertical-align: middle;
      position: absolute;
      bottom: 0;
      padding-top: 5px;
      transition: 0.4s;
    }
  }
}

/* 图表文字说明样式 */
.home-chart-prompt {
  /*  color: @main-font-color;*/
}

/* 首页图表样式 */
.home-chart {
  width: 100%;
  height: 300px;
  margin-top: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow: hidden;
  /* .home-chart-classify {
          width: calc(50% - 5px);
          height: 100%;
          background-color: @content-bg;
          border-radius: 5px;
          .home-chart-content {
            width: 100%;
            height: 100%;
            margin: auto;
          }
        }
        .home-chart-classify:first-child {
          margin-right: 5px;
        }
        .home-chart-classify:last-child {
          margin-left: 5px;
        } */
}

/* 首页柱状图样式 */
.home-histogram-main {
  display: flex;
  // height: 400px;
  justify-content: space-between;
  flex: 1;
  margin-bottom: 15px;
  .home-histogram {
    position: relative;
    flex: 1;
    height: 350px;
    /*  background-color: @content-bg;*/
    border-radius: 5px;
    background-color: white;
    box-shadow: inset 0px 0px 3px 1px var(--label-font-color, #5d8bc4);
    .title {
      // display: flex;
      // justify-content: space-between;
      padding: 0px 10px 0 30px;
      .font-style {
        padding: 10px 0 0 10px;
      }
      .rightTime {
        .date-picker {
          /deep/.ivu-date-picker .ivu-select-dropdown {
            // position: absolute;
            left: 330px !important;
          }
        }
      }
    }
    /* margin: 0 5px 0 5px; */
    .home-histogram-content {
      width: 100%;
      height: 340px;
    }
  }
}
.date-adjust {
  width: 200px;
  float: right;
  margin: 5px 40px 0 0;
}
.select-style {
  position: absolute;
  width: 150px;
  right: 20px;
  top: 10px;
}

/* =====【中间集群样式】===== */
.content {
  display: flex;
  justify-content: space-between;
  padding: 10px 0px;
  flex-wrap: wrap;
  width: 100%;
}
.content-item {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 10px;
}
.content-item-margin {
  margin: 0 6px 10px 6px;
}
.nodeIcon {
  width: 25px;
  height: 25px;
  margin-right: 20px;
}
.font-style {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 600;
  padding: 10px 30px 10px 20px;
  /* color: @main-font-color;*/
}
.text-right-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  /* color: @main-font-color;*/
  margin: 10px 0;
  .title {
    margin-bottom: 1px;
  }
}
.pie-tb-header {
  width: 100%;
  margin-left: -4px;
}
.card-header-actions {
  width: 100%;
}
.echarts-style {
  width: 49%;
  height: 180px;
  display: flex;
  justify-content: center;
}
.echarts {
  display: flex;
  //   border: 1px solid @global-border-color;
  height: 178px;
  background-color: white;
  box-shadow: inset 0px 0px 3px 1px var(--label-font-color, #5d8bc4);
}
.first-content {
  width: 100%;
  // background-color: #fff;

  .content-item {
    // width: 510px;
    flex: 1;
    .echarts {
      // width: 100%;
      height: 178px;
      .right-content {
        margin-top: 64px;
        text-align: center;
        //  color: @main-font-color;
        width: 49%;
        height: 178px;
      }
    }

    .text-item {
      width: 100%;
      height: 80px;
      display: flex;
      justify-content: space-between;
      margin: 10px 0px 0 0;
      box-shadow: inset 0px 0px 5px 3px rgba(3, 53, 182, 0.4);
      //   border: 2px solid @content-border-color;
      .text-item-item {
        text-align: center;
        flex: 1;
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: white;
        box-shadow: inset 0px 0px 3px 1px var(--label-font-color, #5d8bc4);
        //   border: 2px solid @content-border-color;
        // .title{
        //   // margin-bottom: 10px;
        // }
        .content-text {
          font-size: 18px;
          font-weight: 600;
        }
      }

      // .text-item-item:last-child {
      //   margin-left: 10px;
      // }
    }
  }
}
.last-content {
  width: 100%;
  background-color: white;
  box-shadow: inset 0px 0px 3px 1px var(--label-font-color, #5d8bc4);
  border-radius: 5px;
}
/* 系统负载情况==样式 */
.home-histogram-top {
  position: relative;
  width: 100%;
  height: 450px;
  //   background-color: @content-bg;
  border-radius: 5px;
  background-color: white;
  box-shadow: inset 0px 0px 3px 1px var(--label-font-color, #5d8bc4);
  .middle-content {
    width: 100%;
    // background-color: #fff;
    margin: 10px 0;
    height: 300px;
    .title {
      // display: flex;
      // justify-content: space-between;
      // margin-right: 50px;
      // padding: 10px 40px 0 30px;
      /* height: 80px; */
      padding: 0px 10px 0 30px;

      .font-style {
        padding: 10px 0 0 10px;
      }
      .selectTime {
        .date-picker {
          /deep/.ivu-date-picker .ivu-select-dropdown {
            // position: absolute;
            left: 1097px !important;
          }
        }
      }
    }
  }
}
.date-time-interval {
  width: 50px;
  margin-left: 20px;
}
/deep/ .date-time-interval .ivu-input {
  border-radius: 5px 0 0 5px;
}
/deep/ .ivu-select-single .ivu-select-selection {
  /* height: 34px; */
  border-radius: 0 5px 5px 0;
}
#main6 {
  width: 100%;
  height: 100%;
  /* padding: 10px 90px; */
}
// 时间间隔样式
.timeRange {
  display: flex;
  justify-content: flex-end;
  p {
    //     color: @main-font-color;
    font-size: 16px;
    // margin-left: 18px;
    margin-right: 14px;
    cursor: pointer;
    margin-bottom: 0;
  }
  .cur {
    color: var(--label-font-color, #5d8bc4);
  }
}
.selectTime {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  //    color: @main-font-color;
  font-size: 16px;
  .custom {
    margin-right: 10px;
  }
  // .date-picker {
  //   width: 300px;
  // }
}

// .date-picker3 {
//   /deep/.ivu-date-picker .ivu-select-dropdown {
//     // position: absolute;
//     left: 1097px !important;
//   }
// }
</style>
